<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>The Fab Four</title>
  <meta name="author" content="大漠">
  <style>
    html,
    body {
      min-width: 260px;
      min-height: 100%;
      padding: 0;
      Margin: 0 auto;
      background: #fff;
    }

    a img {
      border: none;
    }

    .ReadMsgBody {
      width: 100%;
    }

    .ExternalClass {
      width: 100%;
    }

    .ExternalClass * {
      line-height: 100%;
    }

    table,
    td {
      border-collapse: collapse;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }
  </style>
  <style type="text/css">
    @media only screen and (max-width:480px) {
      @-ms-viewport {
        width: 320px;
      }
      @viewport {
        width: 320px;
      }
    }
  </style>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!--[if !mso]>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <![endif]-->
</head>

<body>
  <!--[if mso]>
	<table border="0" cellpadding="0" cellspacing="0" width="800" align="center" bgcolor="#ffffff" style="width:800px;"><tr><td>
	<![endif]-->
  <div style="Margin:0 auto; max-width:800px; min-width:260px; font:16px sans-serif;">
    <div style="text-align:center; font-size:0;">
      <div style="width:190px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(190px); width:calc(230400px - 48000%); min-width:calc(190px);">
        <h1 style="Margin:20px auto; color:#231f20; font:bold 32px sans-serif; text-align:left; width:190px; letter-spacing:-0.05em;">The Fab Four</h1>
      </div>
    </div>
    <div style="text-align:center; font-size:0;">
      <!--[if mso]>
			<table border="0" cellpadding="0" cellspacing="0" width="800" align="center" bgcolor="#ffffff" style="width:800px;"><tr><td style="background:#27AAE1;">
			<![endif]-->
      <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#27AAE1; vertical-align:top; width:25%; min-width:120px; max-width:50%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
        <a href="https://dribbble.com/shots/2012212-Ringo-John" target="_blank"><img src="http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/ringo.png" alt="" width="200" style="display:block; width:100%; height:auto; max-width:240px;" border="0" /></a>
      </div>
      <!--[if mso]>
			</td><td style="background:#F05A41;">
			<![endif]-->
      <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#F05A41; vertical-align:top; width:25%; min-width:120px; max-width:50%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
        <a href="https://dribbble.com/shots/2012212-Ringo-John" target="_blank"><img src="http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/john.png" alt="" width="200" style="display:block; width:100%; height:auto; max-width:240px;" border="0" /></a>
      </div>
      <!--[if mso]>
			</td><td style="background:#FACF39;">
			<![endif]-->
      <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#FACF39; vertical-align:top; width:25%; min-width:120px; max-width:50%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
        <a href="https://dribbble.com/shots/2012203-Paul-George" target="_blank"><img src="http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/george.png" alt="" width="200" style="display:block; width:100%; height:auto; max-width:240px;" border="0" /></a>
      </div>
      <!--[if mso]>
			</td><td style="background:#F266B6;">
			<![endif]-->
      <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#F266B6; vertical-align:top; width:25%; min-width:120px; max-width:50%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
        <a href="https://dribbble.com/shots/2012203-Paul-George" target="_blank"><img src="http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/paul.png" alt="" width="200" style="display:block; width:100%; height:auto; max-width:240px;" border="0" /></a>
      </div>
      <!--[if mso]>
			</td></tr></table>
			<![endif]-->
    </div>
    <div style="text-align:center; font-size:0;">
      <!--[if mso]>
			<table border="0" cellpadding="0" cellspacing="0" width="800" align="center" bgcolor="#ffffff" style="width:800px;"><tr><td style="background:#27AAE1;">
			<![endif]-->
      <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#27AAE1; vertical-align:top; width:25%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
        <p style="Margin:16px;">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
      </div>
      <!--[if mso]>
			</td><td style="background:#F05A41;">
			<![endif]-->
      <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#F05A41; vertical-align:top; width:25%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
        <p style="Margin:16px;">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
      </div>
      <!--[if mso]>
			</td><td style="background:#FACF39;">
			<![endif]-->
      <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#FACF39; vertical-align:top; width:25%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
        <p style="Margin:16px;">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
      </div>
      <!--[if mso]>
			</td><td style="background:#F266B6;">
			<![endif]-->
      <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#F266B6; vertical-align:top; width:25%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
        <p style="Margin:16px;">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
      </div>
      <!--[if mso]>
			</td></tr></table>
			<![endif]-->
    </div>
    <div style="text-align:center; font-size:0; background:#FACF39;">
      <!--[if mso]>
			<table border="0" cellpadding="0" cellspacing="0" width="800" align="center" bgcolor="#ffffff" style="width:800px;"><tr><td style="width:40%; background:#FACF39;">
			<![endif]-->
      <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#FACF39; vertical-align:top; width:40%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(40%); width:calc(230400px - 48000%); min-width:calc(40%);">
        <p style="Margin:16px;">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
      </div>
      <!--[if mso]>
			</td><td style="width:60%; background:#27AAE1;">
			<![endif]-->
      <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#27AAE1; vertical-align:top; width:60%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(60%); width:calc(230400px - 48000%); min-width:calc(60%);">
        <p style="Margin:16px;">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente error quisquam facere ex harum dolores qui.
        </p>
      </div>
      <!--[if mso]>
			</td></tr></table>
			<![endif]-->
    </div>
    <div style="text-align:center; font-size:0; background:#F05A41;">
      <!--[if mso]>
			<table border="0" cellpadding="0" cellspacing="0" width="800" align="center" bgcolor="#ffffff" style="width:800px;"><tr><td style="width:33%; background:#F266B6;">
			<![endif]-->
      <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#F266B6; vertical-align:top; width:33%; min-width:160px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(33%); width:calc(230400px - 48000%); min-width:calc(33%);">
        <p style="Margin:16px;">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
      </div>
      <!--[if mso]>
			</td><td style="width:34%; background:#F05A41;">
			<![endif]-->
      <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#F05A41; vertical-align:top; width:34%; min-width:160px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(34%); width:calc(230400px - 48000%); min-width:calc(34%);">
        <p style="Margin:16px;">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
      </div>
      <!--[if mso]>
			</td><td style="width:33%; background:#FACF39;">
			<![endif]-->
      <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#FACF39; vertical-align:top; width:33%; min-width:160px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(33%); width:calc(230400px - 48000%); min-width:calc(33%);">
        <p style="Margin:16px;">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
      </div>
      <!--[if mso]>
			</td></tr></table>
			<![endif]-->
    </div>
    <p style="Margin:10px 0; color:#aaa; font:13px/1.5 sans-serif; text-align:right;">
      Illustrations by <a href="https://dribbble.com/elias" target="_blank" style="color:#aaa;">Elias Stein</a>
    </p>
  </div>
  <!--[if mso]>
	</td></tr></table>
	<![endif]-->
</body>

</html>
